<template>
  <header class="header">
    <h1>todos</h1>
    <input id="toggle-all" class="toggle-all" type="checkbox" v-model="isCheckAll" />
    <label v-show="list.length" for="toggle-all"></label>
    <input
      class="new-todo"
      placeholder="输入任务名称-回车确认"
      autoFocus
      v-model.trim="content"
      @keyup.enter="onEnter"
    />
  </header>
</template>

<script lang="ts" setup>
import store, { Todo } from '@/store'
import { ref, computed, toRefs } from '@vue/reactivity'
const content = ref('')
// 10. 头部 - 双向数据绑定，按回车键，新增待办任务
const onEnter = () => {
  if (!content.value) return alert('请输入内容...')
  const todo: Todo = { id: Date.now(), content: content.value, completed: false }
  store.commit('addTodo', todo)
  content.value = ''
}

const { list } = toRefs(store.state)

// 11. 计算全选状态，切换全选状态
const isCheckAll = computed({
  get: () => {
    return list.value.length !== 0 && list.value.every(v => v.completed)
  },
  set: (checked) => {
    store.commit('changeAll', checked)
  }
})
</script>
